<!-- 新闻详情 -->
<template>
  <div class="newsDetail">
    <h1 style="text-align: center">{{ news?.title }}</h1>
    <div v-html="news?.content"></div>
  </div>
</template>

<script setup>
import { reqGetNewsDetail } from "@/api/api";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const news = ref();
/** 获取新闻详情 */
onMounted(async () => {
  const res = await reqGetNewsDetail(route.params.id);
  if (res.code === 200) {
    news.value = res.data;
  } else {
    router.push("/news");
  }
});
</script>

<style lang="scss" scoped>
.newsDetail {
  width: 70%;
  min-height: 80vh;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba($color: #ffffff, $alpha: 0.5);
}
</style>
